<template>
  <view class="user-info">
    <view class="container">
      <view class="user-info-avatar">
        <TImage :src="appUser?.avatar" width="115rpx" height="115rpx" border-radius="50%" error-img-type="person" />
      </view>
      <view class="user-info_info">
        <template v-if="appUser.phonenumber">
          <view class="user-info_name">{{ appUser?.userName }}</view>

          <template v-if="cocInfo">
            <view v-if="appUser?.companyName" class="user-info_cocName">
              <text>{{ appUser?.companyName }}</text>
            </view>
            <view v-if="cocInfo?.levelName" class="user-info_levelName" @click="toSelectiveType">
              <text>{{ cocInfo.levelName }}</text>
            </view>
          </template>
          <view v-else class="user-info_levelName" @click="toSelectiveType">申请入会</view>
        </template>
        <TButton
          v-else
          text="立即登录"
          type="primary"
          custom-class="h-30 linh-30 br-30"
          :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0.6)', minWidth: '88px' }"
          @click="toLogin"
        />
      </view>
    </view>
    <view class="right-btn">
      <view v-if="!currentCocId" class="handle-btn" @click.stop="editInfo">个人资料</view>
      <view
        v-if="attacheInfoData?.phone && attacheInfoData?.userName"
        class="handle-btn"
        @click.stop="showAttachInfo"
      >
        联系专员
      </view>
    </view>

    <UniPopup ref="attachPopup">
      <view class="attach-info">
        <view class="attach-info_item">
          <text class="attach-info_label">服务专员</text>
          <text>{{ attacheInfoData?.userName }}</text>
        </view>
        <view class="attach-info_item">
          <text class="attach-info_label">专员电话</text>
          <text class="attach-info_phone" @click="makingCalls">{{ attacheInfoData?.phone }}</text>
        </view>
      </view>
    </UniPopup>
  </view>
</template>

<script setup lang="ts">
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { computed, ref, getCurrentInstance, watch, unref } from 'vue';
  import { isLogin } from '@/utils/is';
  import { attacheInfo } from '@/api/mine';
  import type { IAttacheInfo } from '@/api/mine/types';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { storeToRefs } from 'pinia';
  import { toSelectiveType as dynamicToSelectiveType } from '@/utils/dynamicConfig';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const _this = getCurrentInstance();
  const useUser = useUserStoreWithOut();

  const appUser = computed(() => useUser.userInfo);
  const { cocInfo, currentCocId } = storeToRefs(useUser);

  const attacheInfoData = ref<IAttacheInfo>();

  watch(currentCocId, (val) => val && attacheInfo(val).then((r) => (attacheInfoData.value = r)), {
    immediate: true,
  });

  const showAttachInfo = () => {
    (_this?.refs.attachPopup as any).open('center');
  };

  const makingCalls = () => {
    attacheInfoData.value && uni.makePhoneCall({ phoneNumber: attacheInfoData.value?.phone });
  };

  const toSelectiveType = () => {
    dynamicToSelectiveType({
      linkUrl: 'selectiveType',
    });
  };
  const editInfo = function () {
    isLogin(editInformation);
  };
  const editInformation = function () {
    navigateTo({ name: 'myProfile' });
  };

  function toLogin() {
    isLogin(() => {});
  }
</script>
<style lang="scss" scoped>
  .user-info {
    margin: 0 30rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right-btn {
      height: 165rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .handle-btn {
        height: 48rpx;
        line-height: 48rpx;
        padding: 0 16rpx;
        border: 1px solid #fff;
        border-radius: 24rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
    .container {
      height: 165rpx;
      display: flex;
      align-items: center;
      flex: 1;
    }
    &-avatar {
      width: 115rpx;
      height: 115rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
      background-color: #f5f5f5;
      flex-shrink: 0;
      border: 4rpx solid rgba($color: #fff, $alpha: 0.4);
      box-sizing: border-box;
      > .image {
        width: 100%;
        height: 100%;
      }
    }
    &_info {
      height: 100%;
      min-height: 115rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    &_name {
      font-size: 42rpx;
      color: #fff;
      font-weight: bolder;
    }
    &_cocName {
      color: #fff;
      font-size: 23rpx;
      display: flex;
      align-items: center;
      .switch-coc {
        margin-left: 23rpx;
        width: 87rpx;
        height: 32rpx;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 15rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23rpx;
        line-height: 0;
        .ali-icon {
          font-size: 20rpx;
          color: #fff;
          margin-left: 6rpx;
        }
      }
    }
    &_levelName {
      width: max-content;
      height: 40rpx;
      line-height: 40rpx;
      color: #ea5e0e;
      background: var(--golden, linear-gradient(90deg, #fdedc7 0%, #f7d9a2 100%));
      font-size: 24rpx;
      padding: 0 16rpx;
      border-radius: 100rpx;
    }

    .attach-info {
      width: 632rpx;
      min-height: 200rpx;
      border-radius: 10rpx;
      background-color: #fff;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      &_item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 27rpx;
        color: #333;
      }
      &_label {
        color: #808080;
      }
      &_phone {
        color: #4a75ff;
      }
    }
  }
</style>
